import React from 'react';
import type { LongPressState } from '../hooks/useLongPressDrag';
import styles from '../styles/LongPressIndicator.module.css';

interface LongPressIndicatorProps {
  longPressState: LongPressState;
  progress: number; // 0-1
  config: {
    cellWidth: number;
    cellHeight: number;
    roomTypeWidth: number;
    roomNumberWidth: number;
  };
  selectedCount: number;
}

const LongPressIndicator: React.FC<LongPressIndicatorProps> = ({
  longPressState,
  progress,
  config,
  selectedCount,
}) => {
  if (longPressState.startTime === 0) return null;

  const { startPosition } = longPressState;

  // 计算指示器在页面中的位置
  const indicatorStyle: React.CSSProperties = {
    position: 'fixed',
    left: `${startPosition.x - 50}px`,
    top: `${startPosition.y - 50}px`,
    width: '100px',
    height: '100px',
    pointerEvents: 'none',
    zIndex: 9999,
  };

  return (
    <div className={styles.indicator} style={indicatorStyle}>
      {/* 圆形进度条 */}
      <svg className={styles.progressRing} viewBox='0 0 100 100'>
        {/* 背景圆 */}
        <circle
          className={styles.progressRingBackground}
          cx='50'
          cy='50'
          r='40'
          fill='none'
          stroke='rgba(255, 255, 255, 0.3)'
          strokeWidth='4'
        />

        {/* 进度圆 */}
        <circle
          className={styles.progressRingProgress}
          cx='50'
          cy='50'
          r='40'
          fill='none'
          stroke='#007bff'
          strokeWidth='4'
          strokeLinecap='round'
          strokeDasharray={`${2 * Math.PI * 40}`}
          strokeDashoffset={`${2 * Math.PI * 40 * (1 - progress)}`}
          transform='rotate(-90 50 50)'
        />
      </svg>

      {/* 中心内容 */}
      <div className={styles.centerContent}>
        {longPressState.isLongPressing ? (
          <>
            <div className={styles.icon}>🚀</div>
            <div className={styles.text}>批量拖拽</div>
          </>
        ) : (
          <>
            <div className={styles.icon}>✋</div>
            <div className={styles.count}>{selectedCount}</div>
          </>
        )}
      </div>

      {/* 提示文本 */}
      <div className={styles.tooltip}>
        {longPressState.isLongPressing
          ? '已激活批量拖拽'
          : `长按启动批量拖拽 (${selectedCount}项)`}
      </div>
    </div>
  );
};

export default LongPressIndicator;
